<template>
  <el-form-item label="商品图片" prop="thumbnailUrl" :rules="rules">
    <upload
      :isAddFirstText="isAddFirstText"
      v-model:model-value="modelValue"
      :limit="props.limit"
      list-type="picture-card"
    >
      <el-icon>
        <Plus />
      </el-icon>
    </upload>
  </el-form-item>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    isAddFirstText: boolean;
    modelValue: string | string[];
    limit?: number;
  }>(),
  {
    modelValue: "",
    limit: 1,
    isAddFirstText: false,
  }
);

const emits = defineEmits(["update:model-value"]);
const modelValue = computed({
  set(newValue) {
    emits("update:model-value", newValue);
  },
  get() {
    return props.modelValue;
  },
});

const rules = [{ message: "请上传商品图片", required: true, trigger: "blur" }];
</script>

<style scoped lang="scss"></style>
